<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color:red;
        }
        .right{
            color:green;
        }
    </style>
</head>
<body>
<form action="">
    <input id="sjname" type="text" placeholder="手机号">
    <input id="tel" type="text" placeholder="手机号" maxlength="11" onkeyup="checkPhone2()"/>
    <span class="error" id="telinfo"></span>
    <input type="text" id="yzm" placeholder="验证码"/>
    <input type="button" id="yzmbtn" onclick="checkPhone()"
           value="获得验证码">
    <input type="text" placeholder="密码">
    <input type="button" onclick="reg()" value="商家注册">
</form>
<script>
    function reg(){
        $.post("",{
            tel:tel.value,
            name:sjname.value,
            pwd:pwd.value,
            yzm:yzm.value
        },function(data){
            if (data == -3) {
                alert("手机号重复！")
            }
        })
    }
    //验证手机号码
    var PhoneIsRight = false;
    function checkPhone2(){
        var t = tel.value;
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(t)) {
            telinfo.className ="right";
            telinfo.innerHTML = "手机号正确";
            $.get("/sh/is_tel_repeat",{tel:t},function(data){
                if (data==1){
                    telinfo.className ="error";
                    telinfo.innerHTML = "该号码已经注册过！";
                    PhoneIsRight = false;
                    return;
                }
            })
            PhoneIsRight = true;
        }else {
            telinfo.className ="error";
            telinfo.innerHTML = "* 手机号码有误！";
            PhoneIsRight = false;
        }
    }
    //验证码按钮设置
    function checkPhone(){
        if(PhoneIsRight){
            //禁用按钮
            yzmbtn.disabled = "disabled";
            yzmbtn.style.cursor="not-allowed";
            var s=60;
            var t=setInterval(function(){
                yzmbtn.value= "短信已经发送("+s--+")";
                if(s<=0){
                    //按钮还原
                    yzmbtn.value="获得验证码";
                    yzmbtn.style.cursor="";
                    yzmbtn.disabled = "";
                    clearInterval(t);
                }
            },1000);
            $.get("http://localhost:8080/sh/send_sms",{tel:tel.value},function(data){
                if (data){
                    alert("短信发送成功！")
                }
            })
        }else {
            checkPhone2();
        }
    }
</script>
</body>
</html>
